<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>领取优惠券</title>
    <script src="./jquery.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="./data.js"></script>
    <link rel="stylesheet" href="./weui.min.css">
    <style>
        .noselect {
            -webkit-touch-callout: none;
            /* iOS Safari */
            -webkit-user-select: none;
            /* Safari */
            -khtml-user-select: none;
            /* Konqueror HTML */
            -moz-user-select: none;
            /* Firefox */
            -ms-user-select: none;
            /* Internet Explorer/Edge */
            user-select: none;
            /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
        }

        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            font-size: 12px;
            font-family: "SF Pro SC", "HanHei SC", "SF Pro Text", "Myriad Set Pro", "PingFang SC",
            "Helvetica Neue", "Helvetic", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "Arial",
            "Verdana", "sans-serif";
        }

        .step {
            padding: 10px 0;
        }

        .step-wrapper {
            position: relative;
            width: 100%;
            display: flex;
            flex-direction: row;
        }

        .divider {
            position: absolute;
            left: 80px;
            right: 78px;
            top: 14px;
            height: 1px;
            z-index: 0;
            background: #ddd;
        }

        .step-item {
            flex: 1;
            text-align: center;
        }

        .step-item .step-count {
            width: 28px;
            font-size: 14px;
            display: inline-block;
            height: 28px;
            position: relative;
            z-index: 100;
            background: #fff;
            border-radius: 50%;
            color: rgba(0, 0, 0, 0.25);
            line-height: 28px;
            text-align: center;
            border: 1px solid rgba(0, 0, 0, 0.25);
            margin-bottom: 6px;
        }

        .step-item.current .step-count {
            color: #fff;
            background: #1296db;
            border-color: #1296db;
        }

        .step-item .step-content .title {
            color: rgba(0, 0, 0, .65);
            font-weight: 500;
            font-size: 14px;
        }

        .step-item .step-content .desc {
            color: rgba(0, 0, 0, .45);
            font-size: 12px;
        }

        .step-item.current .step-content .title {
            color: rgba(0, 0, 0, .85);
        }

        /* 地址 */

        .address {
            margin: 14px 10px 0 10px;
        }

        .address .address-item {
            display: flex;
            flex-direction: row;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        /* .address .address-item::after {
            content: '';
            height: 1px;
            background: #ddd;
            position: absolute;
            bottom: 1;
            left: 2px;
            right: 2px;
        } */

        .address .address-item .select-wrapper {
            display: inline-block;
            position: relative;
            padding-right: 10px;
        }

        .address .address-item .arrow {
            content: " ";
            display: inline-block;
            height: 6px;
            width: 6px;
            border-width: 2px 2px 0 0;
            border-color: #C8C8CD;
            border-style: solid;
            -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
            transform: matrix(-0.71, 0.71, -0.71, -0.71, 0, 0);
            position: relative;
            top: -2px;
            position: absolute;
            top: 14px;
            margin-top: -4px;
            right: 2px;
        }

        .address .address-item .title {
            width: 60px;
            line-height: 33px;
            text-align: center;
            color: rgba(0, 0, 0, 0.85);
            font-size: 14px;
        }

        .address .address-item select {
            border: 0;
            padding: 0 5px;
            outline-style: none;
            background: #fff;
            display: inline-block;
            height: 33px;
            line-height: 33px;
            color: rgba(0, 0, 0, .45);
            text-align: center;
            -webkit-appearance: none;
        }

        .address .address-item select option {
            text-align: left;
            color: rgba(0, 0, 0, .65);
        }

        .choose-idcard .desc {
            text-align: center;
            color: rgba(0, 0, 0, .45);
            font-size: 12px;
        }

        .choose-idcard .btn {
            width: 220px;
            height: 48px;
            display: block;
            margin: 42px auto 10px auto;
            position: relative;
            padding-left: 0;
            color: #1296db;
            background: #ffffff;
            border: 1px solid #1296db;

            border-radius: 8px;
            cursor: pointer;
            outline: none;
        }

        .choose-idcard .btn:active {
            background: #1296db;
            color: #fff;
        }

        .choose-idcard .btn .icon {
            width: 32px;
            height: 32px;
            position: absolute;
            left: 12px;
            top: 6px;
            z-index: 999;
            background: url(./ic_camera.png) no-repeat center;
        }

        .choose-idcard .btn:active .icon {
            background-image: url(./ic_camera_press.png);
        }

        .choose-idcard.hide {
            display: none;
        }


        .verify-result {
            display: block;
        }

        .verify-result.hide {
            display: none;
        }

        .verify-result .bg-idcard {
            display: block;
            width: 160px;
            height: 90px;
            margin: 24px 0 10px 10px;
        }

        .verify-result .address-info {
            line-height: 22px;
            font-size: 13px;
            text-align: left;
            padding-left: 10px;
            color: rgba(0, 0, 0, .65);
        }

        .verify-result .result-notice {
            text-align: left;
            padding-left: 10px;
            font-size: 15px;
            font-weight: 400;
            color: #1296db;
        }

        .coupon-list {
            padding: 20px 10px 0 10px;
        }

        .coupon-list.hide {
            display: none;
        }

        .coupon-item {
            display: flex;
            flex-direction: row;
            padding: 10px 0;
            border-bottom: 1px solid #ddd;
        }

        .coupon-item .btn {
            width: 72px;
            border-radius: 4px;
            height: 33px;
            line-height: 33px;
            text-align: center;
            color: #1296db;
            outline: none;
            cursor: pointer;
            background: #fff;
            border: 1px solid #1296db;
            font-size: 12px;
        }

        .coupon-item .btn.disable {
            border: 1px solid rgba(0, 0, 0, .45);
            color: rgba(0, 0, 0, .45);
        }

        .coupon-item .item-content {
            flex: 1;
        }

        .coupon-item .item-content .title {
            color: rgba(0, 0, 0, .85);
        }

        .coupon-item .item-content .desc {
            color: rgba(0, 0, 0, .45);
        }

        .address>.title {
            color: rgba(0, 0, 0, .85);
            font-weight: 400;
            font-size: 15px;
            height: 33px;
            line-height: 33px;
        }
    </style>
</head>

<body>
    <div class="step">
        <div class="step-wrapper">
            <div class="divider"></div>
            <div class="step-item current">
                <span class="step-count">1</span>
                <div class="step-content">
                    <h3 class="title">填写地址</h3>
                    <p class="desc">家庭住址</p>
                </div>
            </div>
            <div class="step-item">
                <span class="step-count">2</span>
                <div class="step-content">
                    <h3 class="title">身份验证</h3>
                    <p class="desc">证件验证</p>
                </div>
            </div>
            <div class="step-item">
                <span class="step-count">3</span>
                <div class="step-content">
                    <h3 class="title">领取成功</h3>
                    <p class="desc">领券</p>
                </div>
            </div>
        </div>
    </div>
    <div class="address">
        <h3 class="title">填写地址：</h3>
        <div class="address-item">
            <div class="title">省&nbsp;&nbsp;份：</div>
            <div class="select-wrapper">
                <select name="provinces" id="provinces" onchange="onProvincesChange(this.value)">
                    <option value="0">选择省份</option>
                </select>
                <i class="arrow"></i>
            </div>
        </div>
        <div class="address-item">
            <div class="title">城&nbsp;&nbsp;市：</div>
            <div class="select-wrapper">
                <select name="citys" id="citys" onchange="onCitysChange(this.value)">
                    <option value="0">选择城市</option>
                </select>
                <i class="arrow"></i>
            </div>
        </div>
        <div class="address-item">
            <div class="title">地&nbsp;&nbsp;区：</div>
            <div class="select-wrapper">
                <select name="areas" id="areas" onchange="onAreasChange(this.value)">
                    <option value="0">选择地区</option>
                </select>
                <i class="arrow"></i>
            </div>
        </div>
        <div class="address-item">
            <div class="title">街&nbsp;&nbsp;道：</div>
            <div class="select-wrapper">
                <select name="street" id="street" onchange="onStreetsChange(this.value)">
                    <option value="0">选择街道</option>
                </select>
                <i class="arrow"></i>
            </div>
        </div>
    </div>
    <div class="choose-idcard hide">
        <button class="btn noselect" onclick="uploadIdcard()">
            <i class="icon camera"></i>
            上传证件照片
        </button>
        <p class="desc">上传证件照片进行验证</p>
    </div>
    <div class="verify-result hide">
        <img src="" alt="证件照" class="bg-idcard">
        <p class="address-info"></p>
        <p class="result-notice success">恭喜您！已通过身份证验证，可领取以下免费券</p>
    </div>
    <div class="coupon-list">
    </div>
    <div id="loadingToast" style="display:none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content toast-text">证件验证中...</p>
        </div>
    </div>
    <div id="toast-msg" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-icon-warn weui-icon_toast"></i>
            <p class="weui-toast__content">证件认证失败</p>
        </div>
    </div>
    <div id="toast-success" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
            <p class="weui-toast__content">领取成功</p>
        </div>
    </div>
    <script>
        var address = [];
        var step = 1;
        var provinces = window.areaData["86"];
        var citys;
        var areas;
        var streets;

        var openid = sessionStorage.getItem("openId");
        sessionStorage.removeItem("openId");
        var provinceOptions = Object.keys(provinces).map((key, index) => {
            return "<option value='" + key + "'>" + provinces[key] + "</option>"
        });
        provinceOptions = "<option value=''>选择省份</option>" + provinceOptions;
        $("#provinces").html(provinceOptions);

        function onProvincesChange(value) {
            var cityOptions = "<option value=''>选择城市</option>";
            address = [];
            if (value) {
                address[0] = [provinces[value]];
                citys = window.areaData[value];
                cityOptions = Object.keys(citys).map((key, index) => {
                    return "<option value='" + key + "'>" + citys[key] + "</option>"
                });
                cityOptions = "<option value=''>选择城市</option>" + cityOptions;
            }
            $("#citys").html(cityOptions);
        }
        function onCitysChange(value) {
            var areaOptions = "<option value=''>选择地区</option>";
            address.length = 1;
            if (value) {
                address[1] = [citys[value]];
                areas = window.areaData[value];
                areaOptions = Object.keys(areas).map((key, index) => {
                    return "<option value='" + key + "'>" + areas[key] + "</option>"
                });
                areaOptions = "<option value=''>选择地区</option>" + areaOptions;
            }
            $("#areas").html(areaOptions);
        }

        function onAreasChange(value) {
            var streetOptions = "<option value=''>选择街道</option>";
            address.length = 2;
            if (value) {
                address[2] = [areas[value]];
                streets = window.areaData[value];
                streetOptions = Object.keys(streets).map((key, index) => {
                    return "<option value='" + key + "'>" + streets[key] + "</option>"
                });
                streetOptions = "<option value=''>选择街道</option>" + streetOptions;
            }
            $("#street").html(streetOptions);
        }

        function onStreetsChange(value) {
            if ($(".verify-result").hasClass("hide")) {
                address.length = 3;
                if (value) {
                    address[3] = [streets[value]];
                    step = 2;
                    $(".step-item").removeClass("current");
                    $(".step-item").eq(1).addClass("current");
                    $(".choose-idcard").removeClass("hide");
                }
                console.dir(address);
            }
        }
        //领取优惠券
        function getCoupon(btn, type) {
            $(".toast-text").text = "领取中";
            $("#loadingToast").show();
            $.ajax({
                type: 'POST',
                url: '/csfy/user/addCouponInfo.do',
                data: {
                    type: type,
                },
                success: function (res) {
                    $("#loadingToast").hide();
                    res = JSON.parse(res);
                    if (res.code == 200) {
                        step = 3;
                        $(".step-item").removeClass("current");
                        $(".step-item").eq(2).addClass("current");
                        $(btn).text("已领取");
                        $(btn).addClass("disable");
                        $(btn).removeAttr("onclick");
                        $("#toast-success").show();
                        setTimeout(() => {
                            $("#toast-success").hide();
                        }, 1500);
                    } else {
                        alert(res.msg);
                    }
                }, error: function (error) {
                    $("#loadingToast").hide();
                    alert(error.msg);
                }
            })
        }
        function uploadIdcard() {
            $.ajax({
                type: 'POST',
                url: '/csfy/user/getWxConfig.do',
                data: { url: "http://csfy.bgi.com/wechat/assets/identification.html" },
                success: function (data) {
                    /*
                     console.dir(data);
                    var appid = data.appId;
                    var timestamp = data.timestamp;
                    var nonceStr = data.nonceStr;
                    var signature = data.signature;
                    */
                    var appid = data.appId;
                    var timestamp = data.timestamp;
                    var nonceStr = data.nonceStr;
                    var signature = data.signature;
                    // console.dir(data.object);
                    // var appid = data.object.appId;
                    // var timestamp = data.object.timestamp;
                    // var nonceStr = data.object.nonceStr;
                    // var signature = data.object.signature;
                    wx.config({
                        debug: false,
                        appId: appid,
                        timestamp: timestamp,
                        nonceStr: nonceStr,
                        signature: signature,
                        jsApiList: ['chooseImage', 'uploadImage']
                    });
                    wx.ready(function () {
                        wx.chooseImage({
                            needResult: 1,
                            count: 1,
                            sizeType: ['original', 'compressed'], // ['original', 'compressed']可以指定是原图还是压缩图，默认二者都有
                            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                            desc: 'chooseImage desc',
                            success: function (res) {
                                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                                // 上传照片
                                wx.uploadImage({
                                    localId: '' + localIds,
                                    isShowProgressTips: 1,
                                    success: function (res) {
                                        var serverId = res.serverId;
                                        // step = 3;
                                        // $(".step-item").removeClass("current");
                                        // $(".step-item").eq(2).addClass("current");
                                        // $(".verify-result").removeClass("hide");
                                        // $(".bg-idcard").attr("src", localIds);
                                        $("#loadingToast").show();
                                        $.ajax({
                                            method: 'POST',
                                            url: '/csfy/user/getPresonInfo.do',
                                            data: {
                                                openId: openid,
                                                mediaId: serverId,
                                                withImgCode: "1",
                                            },
                                            success: function (res) {
                                                $("#loadingToast").hide();
                                                var result = JSON.parse(res);
                                                if (result.code == 200) {
                                                    $(".choose-idcard").addClass("hide");
                                                    $(".address-info").text(result.data.name + "," + result.data.sex + "," + result.data.id + "," + result.data.address);
                                                    $(".verify-result").removeClass("hide");
                                                    $(".bg-idcard").attr('src', "data:image/jpeg;base64," + result.data.frontimage);
                                                    var list = result.data.unreceivedCouponInfos.map((item, index) => {
                                                        return '<div class="coupon-item">' +
                                                            '<div class="item-content">' +
                                                            '<h3 class="title">' + item.couponName + '</h3>' +
                                                            '<p class="desc">' + item.couponDesc + '</p>' +
                                                            '</div>' +
                                                            '<button class="btn" onclick="getCoupon(this,' + item.type + ')">领取</button>' +
                                                            '</div>'
                                                    });
                                                    $(".coupon-list").html(list);
                                                } else {
                                                    $("#toast-msg").show();
                                                    setTimeout(() => {
                                                        $("#toast-msg").hide();
                                                    }, 1500);
                                                }
                                            }, error: function (error) {
                                                $("#loadingToast").hide();
                                                $("#toast-msg").show();
                                                setTimeout(() => {
                                                    $("#toast-msg").hide();
                                                }, 1500);
                                            }
                                        })
                                    }
                                });
                            },
                            cancel: function (res) {
                            },
                            fail: function (res) {
                            }
                        });
                    });
                },
                error: function (e) {
                },
                dataType: 'json'
            });
        }
    </script>
</body>

</html>